<!-- 视频，图文，直播瀑布流列表 -->
<template>
	<view class="df waterfall-flow">
		<view class="waterfall-flow-son">
			<view
				v-for="(val, inx) in leftList"
				:key="inx"
				class="waterfall-flow-item animation-slide-bottom"
				:style="{ animationDuration: parseInt(inx / pageNum) * 0.1 + 0.4 + 's' }"
				@click="waterItemBtn(val)"
			>
				<view class="flow-item-img">
					<image :src="val.image ? $util.img(val.image) : staticImgUrl + 'home/load_img.png'" mode="widthFix" style="width: 100%;"></image>
					<block v-if="val.type == 'live'">
						<view class="live-left-top df-cen">
							<image :src="staticImgUrl + 'home/video_top.png'" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
							{{ val.views }}观看
						</view>
						<view class="live-goods df-ai-cen" v-if="val.goods.length > 0">
							<view class="bg-white" style="margin-right: 10rpx;padding: 8rpx;">
								<image :src="$util.img(val.goods[0].sku_image)" style="width: 60rpx;height: 60rpx;"></image>
							</view>
							<view class="df-col">
								<view class="goods-title font-20 line-text">{{ val.goods[0].sku_name }}</view>
								<view class="font-20">{{ val.goods[0].price }}</view>
							</view>
						</view>
					</block>
					<block v-if="val.type !== 'graphic'">
						<view class="live-right-top"><image :src="staticImgUrl + 'home/play_img.png'" style="width: 36rpx;height: 36rpx;"></image></view>
					</block>
				</view>
				<view class="flow-item-bottom">
					<view class="flow-item-title">{{ val.title }}</view>
					<view class="df-cen-rl">
						<view class="df-ai-cen">
							<view class="cu-avatar sm round" v-if="val.headimg" :style="{ backgroundImage: 'url(' + $util.img(val.headimg) + ')' }"></view>
							<view class="cu-avatar sm round" v-else :style="{ backgroundImage: 'url(' + staticImgUrl + 'home/user.png)' }"></view>
							<view class="flow-item-name line-text">{{ val.nickname }}</view>
						</view>
						<view class="df-ai-cen">
							<block v-if="iconType == 'recommend'">
								<image :src="staticImgUrl + 'home/pinglun.png'" style="width: 20rpx;height: 26rpx;margin-right: 10rpx;"></image>
								<view class="icon-num">{{ val[iconNumKey] }}</view>
							</block>
							<block v-if="iconType == 'address'">
								<image :src="staticImgUrl + 'home/loc_icon.png'" style="width: 20rpx;height: 26rpx;margin-right: 10rpx;"></image>
								<view class="icon-num">{{ val[iconNumKey] }}</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="waterfall-flow-son">
			<view
				v-for="(val, inx) in rightList"
				:key="inx"
				class="waterfall-flow-item animation-slide-bottom"
				:style="{ animationDuration: parseInt(inx / pageNum) * 0.1 + 0.4 + 's' }"
				@click="waterItemBtn(val)"
			>
				<view class="flow-item-img">
					<image :src="val.image ? $util.img(val.image) : staticImgUrl + 'home/load_img.png'" mode="widthFix" style="width: 100%;"></image>
					<block v-if="val.type == 'live'">
						<view class="live-left-top df-cen">
							<image :src="staticImgUrl + 'home/video_top.png'" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
							{{ val.views }}观看
						</view>
						<view class="live-goods df-ai-cen" v-if="val.goods.length > 0">
							<view class="bg-white" style="margin-right: 10rpx;padding: 8rpx;">
								<image :src="$util.img(val.goods[0].sku_image)" style="width: 60rpx;height: 60rpx;"></image>
							</view>
							<view class="df-col">
								<view class="goods-title font-20 line-text">{{ val.goods[0].sku_name }}</view>
								<view class="font-20">{{ val.goods[0].price }}</view>
							</view>
						</view>
					</block>
					<block v-if="val.type !== 'graphic'">
						<view class="live-right-top"><image :src="staticImgUrl + 'home/play_img.png'" style="width: 36rpx;height: 36rpx;"></image></view>
					</block>
				</view>
				<view class="flow-item-bottom">
					<view class="flow-item-title">{{ val.title }}</view>
					<view class="df-cen-rl">
						<view class="df-ai-cen">
							<view class="cu-avatar sm round" v-if="val.headimg" :style="{ backgroundImage: 'url(' + $util.img(val.headimg) + ')' }"></view>
							<view class="cu-avatar sm round" v-else :style="{ backgroundImage: 'url(' + staticImgUrl + 'home/user.png)' }"></view>
							<view class="flow-item-name line-text">{{ val.nickname }}</view>
						</view>
						<view class="df-ai-cen">
							<block v-if="iconType == 'recommend'">
								<image :src="staticImgUrl + 'home/pinglun.png'" style="width: 20rpx;height: 26rpx;margin-right: 10rpx;"></image>
								<view class="icon-num">{{ val[iconNumKey] }}</view>
							</block>
							<block v-if="iconType == 'address'">
								<image :src="staticImgUrl + 'home/loc_icon.png'" style="width: 20rpx;height: 26rpx;margin-right: 10rpx;"></image>
								<view class="icon-num">{{ val[iconNumKey] }}</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			leftList: [],
			rightList: [],
			pageNum: 1
		}
	},
	props: {
		// 所有数组
		allList: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 判断icon渲染那种
		iconType: {
			type: String,
			default: 'recommend'
		},
		// icon隔壁渲染的字段
		iconNumKey: {
			type: String,
			default: 'read_num'
		}
	},
	watch: {
		allList(newval, oldval) {
			this.setDataList(newval)
		}
	},
	methods: {
		// 处理值
		setDataList(list) {
			this.rightList = []
			this.leftList = []
			this.pageNum = Math.ceil(list.length / 10)
			list.forEach((v, i) => {
				if (i % 2 == 0) {
					this.leftList.push(v)
				}
				if (i % 2 == 1) {
					this.rightList.push(v)
				}
			})
		},
		waterItemBtn(val) {
			this.$emit('flowcall', val)
		}
	},
	mounted() {}
}
</script>

<style lang="scss">
.waterfall-flow {
	width: 100%;
	.live-left-top {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 2rpx 18rpx 2rpx 2rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 40rpx;
	}
	.live-right-top {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	.live-goods {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 18rpx;
		.goods-title {
			max-width: 220rpx;
			margin-bottom: 10rpx;
		}
		.font-20 {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.waterfall-flow-son {
		width: 48%;
	}
	.waterfall-flow-son:nth-child(odd) {
		margin-right: 2%;
	}
	.waterfall-flow-son:nth-child(even) {
		margin-left: 2%;
	}
	.waterfall-flow-item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		.flow-item-bottom {
			padding: 20rpx 16rpx;
		}
		.flow-item-name {
			margin-left: 10rpx;
			max-width: 120rpx;
		}
		.flow-item-title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 16rpx;
		}
		.flow-item-img {
			position: relative;
			image {
				border-radius: 20rpx 20rpx 0 0;
			}
		}
	}
	.icon-num {
		font-size: 20rpx;
	}
}
</style>
